<div id="mywebgl" style="width:400px;height:300px;outline: 1px solid red;"></div>
<script type="module">
    import { WebGL, viewHandler } from 'vislite';

    var painter = new WebGL(document.getElementById('mywebgl'));

    painter.render({
        mesh: [{
            geometry: {
                attributes: {
                    position: {
                        array: [
                            -1, 1, 1,
                            1, 1, -1,
                            -1, -1, 0
                        ],
                        count: 3,
                        itemSize: 3
                    }
                },
                type: "TRIANGLES"
            },
            material: {
                color: {
                    r: 1,
                    g: 0,
                    b: 0,
                    alpha: 1
                }
            }
        }]
    });

    var matrix = painter.getMatrix();

    viewHandler(function (params) {

        // 键盘控制
        if (params.type == 'lookUp') {
            matrix.rotate(params.value, -1, 0, 0);
        } else if (params.type == 'lookDown') {
            matrix.rotate(params.value, 1, 0, 0);
        } else if (params.type == 'lookLeft') {
            matrix.rotate(params.value, 0, -1, 0);
        } else if (params.type == 'lookRight') {
            matrix.rotate(params.value, 0, 1, 0);
        }

        // 鼠标拖动或手指控制
        else if (params.type == 'rotate') {
            matrix.rotate(params.value, params.normal[0], params.normal[1], params.normal[2]);
        }

        // 滚轮控制
        else if (params.type == 'scale') {
            matrix.scale(params.value, params.value, params.value, 0, 0, 0);
        }

        painter.review();
    })
</script>